<%@ Page Language="vb" AutoEventWireup="false" CodeFile="TabStripWizard.aspx.vb" Inherits="TabStripWizard" MasterPageFile="~/MasterPage.master" EnableEventValidation="false" %>
<%@ Register TagPrefix="DNN" Namespace="DotNetNuke.UI.WebControls" Assembly="DotNetNuke.WebControls" %>
<asp:content id="header" contentplaceholderid="HeaderPlaceHolder" runat="Server">
    <link href="TabStripWizard.aspx.css" type="text/css" rel="stylesheet">
    <script src="TabStripWizard.aspx.js" type="text/javascript"></script>
	<script language="javascript">
	    var m_sNS = '<%=MyDNNTabStrip.NamingContainer.ClientID%>';
	</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:Label runat="server" ID="lblName">Name:</asp:Label><asp:TextBox ID="txtName"
        runat="server">Your Name Here</asp:TextBox>
    <br>
    <table>
        <tr>
            <td>
                <DNN:DNNTabStrip ID="MyDNNTabStrip" runat="server" DefaultContainerCssClass="tabcontainer"
                    DefaultLabel-CssClassHover="tablabelhover" DefaultLabel-CssClassSelected="tablabelselected"
                    DefaultLabel-CssClass="tablabel" DefaultLabel-CssClassDisabled="tablabeldisabled"
                    TabStripScriptPath="../js/" CallbackStatusFunction="statusFunc" TabClickFunction="tabClick"
                    SelectedIndexChangedFunction="selectedIndexChanged" SelectedIndex="0" Width="600px"
                    TabRenderMode="Callback">
                    <DNN:DNNTab ID="tabWelcome" runat="server" Label-Text="Welcome">
                        <br />
                        <p>
                            Welcome to the TabStripWizard Sample. Its purpose is to demonstrate how data from
                            one tab can be posted to the next while utilizing callbacks. This is accomplished
                            by specifying the TabCallbackPostMode property on the tab being selected. There
                            are 4 choices for this property:</p>
                        <ul>
                            <li>None - Only the minimal information to perform a callback is passed.</li>
                            <li>DNNVariable - Only the variables set through the ClientAPI are posted</li>
                            <li>TabStrip - All form data from the rendered tab's conrols is posted</li>
                            <li>Form - The entire form's data is posted</li>
                        </ul>
                        <p>
                            Step 1 has this property set to Form which means it has access to all data on the
                            page that would normally be posted. In this case we are taking the value of txtName
                            and using it inside Step 1's text.
                        </p>
                    </DNN:DNNTab>
                    <DNN:DNNTab ID="tabStep1" runat="server" Label-Text="Step 1" TabCallbackPostMode="Form">
                        <p>
                            Hello
                            <asp:Label ID="lblStep1Name" runat="server" CssClass="takenote"></asp:Label>,<br />
                            The fact that your name was placed above proves that the callback contained the
                            data from the form. The following textbox will be used to demonstrate the passing
                            of only the Tab controls. It should be obvious why this form of posting data is
                            preferable to the Form mode. Transferring data over the network can be costly, so
                            keeping our posting size as small as possible is a good thing. Refer to the TextArea
                            below to see the actual posted data and its size.
                            <br />
                            <asp:TextBox ID="txtStep1" runat="server">Type some text here</asp:TextBox>
                            <br />
                            Select Color:
                            <asp:DropDownList ID="ddlColor" runat="server">
                                <asp:ListItem Value="Red">Red</asp:ListItem>
                                <asp:ListItem Value="Green">Green</asp:ListItem>
                                <asp:ListItem Value="Blue">Blue</asp:ListItem>
                            </asp:DropDownList>
                        </p>
                    </DNN:DNNTab>
                    <DNN:DNNTab ID="tabStep2" runat="server" Label-Text="Step 2" TabCallbackPostMode="TabStrip"
                        Enabled="False">
                        <p>
                            The value from Step 1 is:
                            <asp:Label ID="lblStep2Value" runat="server" CssClass="takenote"></asp:Label></p>
                        <p>
                            Another option for passing information is to use the ClientAPI's dnn.setVar method.
                            Click this button to add a value to the MyValue variable.<input type="button" onclick="dnn.setVar('MyValue', prompt('Enter accesskey value for MyValue', 'A Value'))"
                                value="dnn.setVar" />
                        </p>
                    </DNN:DNNTab>
                    <DNN:DNNTab ID="tabStep3" runat="server" Label-Text="Step 3" TabCallbackPostMode="DNNVariable"
                        Enabled="False">
                        <p>
                            The variable obtained on the server-side for MyValue is:
                            <asp:Label ID="lblMyValue" runat="server" CssClass="takenote"></asp:Label></p>
                    </DNN:DNNTab>
                    <DNN:DNNTab ID="tabFinish" runat="server" Label-Text="Finish" TabCallbackPostMode="None"
                        Enabled="False">
                        <p>
                            The size of this tab's callback request should be the smallest by far. It's TabCallbackPostMode
                            is set to None.
                        </p>
                        <p>
                            This sample application was created to help you better understand the TabCallbackPostMode
                            property and to demonstrate interacting with the tabstrip's client side object model.
                        </p>
                        <p>
                            Hopefully you found it helpful!
                        </p>
                    </DNN:DNNTab>
                </DNN:DNNTabStrip>
            </td>
        </tr>
        <tr>
            <td class="navcontainer">
                <input type="button" value="<< Prev" onclick="prevStep()" disabled="true" id="btnPrev" />
                &nbsp;
                <input type="button" value="Next >>" onclick="nextStep()" id="btnNext" />
            </td>
        </tr>
    </table>
    <br>
    <textarea id="txtMethods" runat="server" rows="30" cols="100" name="txtMethods"></textarea>
    <br />
    \</asp:Content>
